﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>directives</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        .a{
            position: absolute; width: 100px; height: 100px; background-color: blue; color: white;
        }
    </style>
</head>
<body>
<h1>directives</h1><br/>

<div id="app">
    {{name}}<br/>
    <button v-color-top="flag">变色</button>
    <div v-drag class="a">拖拽</div>
    <div v-drag class="a">拖拽2</div>
    <div v-color="flag">123</div>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        //自定义指令
        directives:{
            color(el){
                console.log(arguments);//指的当前的这个dom元素的参数和VNode
            },
            //el指代的是button这个dom元素
            colorTop(el,bindingParam){//这里的名字驼峰，那使用的时候是用 -
                el.style.backgroundColor = bindingParam.value;
            },
            drag(el){
                el.onmousedown = function (e) {
                    var disX = e.pageX - el.offsetLeft;
                    var disY = e.pageY - el.offsetTop;
                    document.onmousemove = function (e) {
                        el.style.left = e.pageX - disX + 'px';
                        el.style.top = e.pageY - disY + 'px';
                    }
                    document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                    }
                    e.preventDefault();
                }
            }
        },
        data:{
            name:'模版数据',
            flag:'red'
        }
    });
</script>

</body>
</html>